<script setup lang="ts">
import { Popconfirm } from 'ant-design-vue'

type OptItem = any
defineOptions({
  name: 'BlockOpts',
  inheritAttrs: true,
})
defineProps<{
  item: OptItem
  disabledUp: boolean
  disabledDown: boolean
}>()
defineEmits<{
  remove: [item: OptItem]
  sort: [item: OptItem, type: 'up' | 'down']
}>()
</script>

<template>
  <div class="block-opts">
    <Popconfirm ok-text="确定" cancel-text="取消" title="确定要删除该项吗?" placement="left" @confirm="$emit('remove', item)">
      <div class="block-opt">
        <i class="i-ant-design:close-outlined w-4 h-4" />
      </div>
    </Popconfirm>
    <div class="block-opt" :class="disabledUp ? 'disabled' : ''" @click="$emit('sort', item, 'up')">
      <i class="i-ant-design:arrow-up-outlined w-4 h-4" />
    </div>
    <div class="block-opt" :class="disabledDown ? 'disabled' : ''">
      <i class="i-ant-design:arrow-down-outlined w-4 h-4" @click="$emit('sort', item, 'down')" />
    </div>
  </div>
</template>

<style lang="less" scoped>
// 父组件要做的事情: 相对定位并设置pr-8类
.block-opts {
  @apply absolute right-0 top-0;

  .block-opt {
    width: 20px;
    height: 20px;
    border: 1px solid #999999;
    color: var(--app-text-color-second);
    margin: 5px 0;
    @apply box-border rounded-full flex justify-center items-center cursor-pointer;

    &.disabled {
      color: #CCCCCC;
      border-color: #CCCCCC;
      @apply cursor-not-allowed;
    }

    &:not(.disabled):hover {
      color: var(--app-color-primary);
      border-color: var(--app-color-primary);
    }
  }
}
</style>
